Semantic HTML

定义（中文） / Definition

语义化 HTML 指用具有明确含义的 HTML 元素来组织网页结构与内容（如 <header>, <nav>, <main>, <article>, <section>, <footer>），让浏览器、搜索引擎与辅助技术（屏幕阅读器等）更容易理解页面信息，从而提升可访问性（a11y）、SEO与可维护性。也常被理解为“用对标签做对事”，而不是只用 <div> 和 <span> 堆砌结构。

发音（IPA） / Pronunciation

/sɪˈmæntɪk ˌeɪtʃ tiː ɛm ˈɛl/

例句 / Examples

I used semantic HTML tags like <main> and <article> to structure the page.
我使用了像 <main> 和 <article> 这样的语义化 HTML 标签来组织页面结构。

Semantic HTML improves accessibility because screen readers can understand the roles of different sections.
语义化 HTML 能提升可访问性，因为屏幕阅读器可以理解不同区域各自的角色与用途。

词源 / Etymology

semantic 来自希腊语词根 sēma（“符号、标记”）及其相关形式，含义与“意义、语义”相关；HTML 是 HyperText Markup Language（超文本标记语言）的缩写。合起来的“Semantic HTML”强调：用“带意义的标记”来表达内容结构，而不仅是视觉排版。

相关词 / Related Words

• Accessibility
• A11y
• Landmark
• Aria
• Html
• Html5
• Markup
• Semantic
• Seo
• Dom

文献与作品中的用例 / Notable Works

• WHATWG — HTML Living Standard（规范中大量强调语义元素与文档大纲相关内容）
• W3C — HTML5 Recommendation（讨论语义元素、结构化内容与可访问性）
• MDN Web Docs — Semantic HTML（专门条目与教程广泛使用该术语）
• Jon Duckett — HTML and CSS: Design and Build Websites（面向初学者，讲解结构与语义标签）
• Jeremy Keith — HTML5 for Web Designers（讨论 HTML5 语义元素与设计实践）
• Steve Krug — Don’t Make Me Think（可用性语境中常涉及清晰结构与语义化的价值）